<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/result_both.css">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <!-- 背景图片 -->
        <div class="bck">
            <!-- 内容背景图片 -->
            <div class="contentImg">
                <img src="./img/ball_attestation/result_3.png" alt="">
            </div>
            <!-- 发现更多 生成海报 -->
            <div class="allBtn">
                <!-- 发现更多 -->
                <span class="more">发现更多</span>
                <span class="poster">生成海报</span>
            </div>
        </div>
    </div>


    <div class="shadeBox">
        <!-- 页面的遮罩层 -->
        <div class="cover">
            <!-- 页面的弹出框 -->
            <div class="modal">
                <!-- 关闭x -->
                <div class="close">
                    <img src="./img/close.png" alt="" style="width:1.8rem;height:1.8rem;display:block">
                </div>
                <!-- 二维码 -->
                <div class="qrCode">
                    <img src="./img/qrcode.png" alt="">
                </div>
            </div>
        </div>
    </div>

     <!-- 当点击生成海报的时候弹框 -->
     <div class="shadeBox">
        <!-- 页面的遮罩层 2-->
        <div class="cover2">
            <div class="loding">
                <!-- gif图片 -->
                <div class="gifImg">
                    <img src="./img/5-121204194032-51.gif" alt="">
                </div>
                <!-- 正在生成 -->
                <div class="oFont">正在生成</div>
            </div>
        </div>
    </div>

    <!-- 分享图片弹框 -->
    <div class="shadeBox">
        <!-- 页面的遮罩层 3 -->
        <div class="cover3">
            <!-- 内容盒子 -->
            <div class="oCoentBox">
                <!-- 关闭x -->
                <div class="close1">
                    <img src="./img/close.png" alt="" style="width:1.8rem;height:1.8rem;display:block">
                </div>
                <!-- 顶部蓝色 -->
                <div class="oBlue">
                    <span>长按图片保存海报分享朋友圈</span>
                </div>
                <div class="allContent">
                    <!-- 保存图片 -->
                    <div class="aImg">
                        <img src="./img/share/share3.jpg" alt="">
                        <!-- 测定评语 -->
                        <span class="oText">经测定,***是一觉醒来型球迷</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
   

    <script src="./js/jquery-3.2.0.js"></script>
    <script src="./js/both.js"></script>
    <script src="./js/html2canvas.min.js"></script>


    <script>
        $(function(){
            // 打开弹出框
            var oMore = document.querySelector(".more");//获取到点击更多的按钮
            var oCover = document.querySelector(".cover");
            var oCover2 = document.querySelector(".cover2");
            var oModal = document.querySelector(".modal");
            var oClose = document.querySelector(".close");
            oMore.onclick = function(){
                oCover.style.display = "block";
                oModal.style.display = "block";
            }
            oClose.onclick = function(){
                oCover.style.display = "none";
                oModal.style.display = "none";
            }


            //打开加载状态的弹框
            var oPoster = document.querySelector(".poster");
            var oLoding = document.querySelector(".loding");
            var oCover3 = document.querySelector(".cover3");
            var oCoentBox = document.querySelector(".oCoentBox");
            var oClose1 = document.querySelector(".close1");
            oPoster.onclick = function(){
                oCover2.style.display = "block";
                oLoding.style.display = "block";
                setTimeout(function(){
                    oCover2.style.display = "none";
                    oLoding.style.display = "none"; 
                    oCover3.style.display = "block";
                    oCoentBox.style.display = "block";
                     //生成canvas图片
                     if(!document.querySelector('.aImg').querySelector('img.result')){
                        html2canvas(document.querySelector('.aImg')).then(function(canvas) {
                            //用新生成的图片替换掉原来的内容
                            var imgTag = document.createElement('img');
                            imgTag.className = 'result';
                            imgTag.src = canvas.toDataURL();
                            document.querySelector('.aImg').innerHTML = '';
                            document.querySelector('.aImg').appendChild(imgTag);
                        });
                    } 
                },300);
            }
            oClose1.onclick = function(){
                oCover3.style.display = "none";
                oCoentBox.style.display = "none";
            }
        })
    </script>
</body>
</html>